<!DOCTYPE html>
<html lang="en">

<head>l
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - 注册</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min-lumen.css" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/plugins/progressbar/mprogress.css" rel="stylesheet"/>
    <link href="../css/plugins/progressbar/style.css" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    <style>
        body{
            background-size: 100% ;
        }
    </style>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 650px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p,
        .sexDiv {
            margin-top: 10px;
            margin-left: 20px;
            color: azure;
        }

        .sexDiv>input,
        .hobby>input {
            width: 30px;
            height: 17px;
        }

        input,
        select {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        .introduce {
            margin-left: 110px;
        }

        .introduce>textarea {
            background-color: rgba(216, 191, 216, 0.5);
            border-style: hidden;
            outline: none;
            border-radius: 5px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 20px;
            color: #f0edf3;
        }

        b {
            margin-left: 50px;
            color: #FFEB3B;
            font-size: 10px;
            font-weight: initial;
        }
    </style>
    <!-- 全局js -->
    <script src="../js/config/config.js"></script>
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/vue/vue.min.js"></script>
    <script src="../js/util/ajaxFactory.js"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/plugins/progressbar/mprogress.js"></script>
    <script src="../js/plugins/progressbar/init-mprogress.js"></script>
    <script src="../js/encrypt/md5.js"></script>
</head>
<body background="../img/9.JPG">
<div id="register">
        <h1>注册</h1>
        <p>用户姓名:<input v-model="username" type="text" autofocus required><label id="name_trip"></label></p>

        <p>用户密码:<input v-model="password" type="password" required><label id="password_trip"></label></p>

        <p>确认密码:<input v-model="surePassword" type="password" required><label id="surePassword_trip"></label></p>
    <p>
        <label id="roleName_trip">角色名称:</label>
        <select v-model="roleId">
            <option v-for="r in role" :value="r.id">{{r.roleName}}</option>
        </select>
    </p>
    <!--
                    <p>
                        用户类型:
                        <select name="type" id="userType">
                            <option value="0">请选择</option>
                            <option value="1">普通类型</option>
                            <option value="2">VIP类型</option>
                        </select>
                        <label id="type_trip"></label>
                    </p>
                    <div class="sexDiv">
                        用户性别:
                        <input class="userSex" name="sex" value="boy" type="radio">男
                        <input class="userSex" name="sex" value="girl" type="radio">女
                        <label id="sex_trip"></label>
                    </div>
                    <p>
                        出生日期:
                        <input id="birthday" type="date">
                        <label id="birthday_trip"></label>
                    </p>
                    <p class="hobby">
                        兴趣爱好:
                        <input type="checkbox" name="hobby" value="read">阅读
                        <input type="checkbox" name="hobby" value="music">音乐
                        <input type="checkbox" name="hobby" value="sport">运动
                        <label id="hobby_trip"></label>
                    </p>
                    <p>
                        电子邮件:
                        <input id="email" type="email" required>
                        <label id="emil_trip"></label>
                    </p>
                    <p> 自我介绍:</p>
                    <div class="introduce">
                        <textarea name="introduce" cols="30" id="introduceText" required rows="10"></textarea>
                        <label id="introduce_trip"></label>
                    </div>
        -->
        <p style="text-align: center;">
            <input type="button" @click="register()"  value="提交">
            <input type="reset" class="button" value="重置">
        </p>
</div>

</body>
<script>
    var registerVue = new Vue({
        el: "#register",
        data:{
            username:'',
            password:'',
            surePassword:'',
            roleId:'',
            role:[]
        },
        created(){
            $z.ajaxPost({
                url: basePath + "/role/selectAll",
                success : function (data) {
                    $z.dealCommonResult(data, function () {
                        registerVue.role=data.data;
                    });

                }
            })
        },
        methods:{
            register: function () {
                $z.ajaxPost({
                    url: basePath +  "/tbUser/register",
                    data: {
                        username :
                        this.username,
                        password :
                        this.password,
                        surePassword :
                        this.surePassword,
                        roleId:this.roleId
                    },
                    success : function (data) {
                        $z.dealCommonResult(data, function () {
                            layer.alert("<em style='color:black'>" + "注册成功！" + "</em>", {
                                icon: 6,
                                offset: "200px",
                                title: '提示',
                            });
                            window.location.href = "login.html";
                        });

                    }
                })
                ;
            }
            }})
</script>
</html>

